<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="" method="get">
    <p>
      <label for="nickName">昵称:</label>
      <input type="text" id="nickName" name="nickName" maxlength="16" placeholder="请输入昵称" minlength="6">
      <span id="res"></span>
    </p>
    <p>
      <label for="password">密码:</label>
      <input type="password" id="password" name="password" maxlength="16" placeholder="请输入密码" minlength="6">
      <span id="pas"></span>
    </p>
    <p>
      <label for="phone">手机号:</label>
      <input type="number" id="phone" name="phone" placeholder="请输入手机号">
      <span id="pho"></span>
    </p>
    <input type="submit" value="注册">
  </form>
</body>
<script>
  var form = document.getElementsByTagName('form')[0]
  var name1 = document.getElementById('nickName')
  var password = document.getElementById('password')
  var phone = document.getElementById('phone')
  var spans = document.getElementsByTagName("span")
  name1.onblur = function (e) {
    //6-16位，不能有除了下划线外的特殊符号
    var v = name1.value.trim()
    console.log(v)
    if (v.length == 0) {
      spans[0].innerHTML = '昵称不能为空'
    } else if (v.length < 6) {
      spans[0].innerHTML = '昵称至少6位'
    } else {
      // /^\w{6,16}$/&&!/^\d{6,16}$/
      if (/^\w{6,16}$/.test(v) && !/^\d{6,16}$/.test(v)) {
        spans[0].innerHTML = '昵称可以使用'
      } else {
        spans[0].innerHTML = '昵称只能是6-16位,不能纯数字,不能有除了下划线以外'
      }
    }
  }
  phone.onblur = function (e) {
    var v = phone.value.trim()
    var reg = /^1[3456789]\d{9}$/
    if (!reg.test(v)) {
      spans[2].innerHTML = '符合'
    } else {
      spans[2].innerHTML = '不符合'
    }
  }
</script>

</html>